<template>
  <!--构建大屏-->
  <div class="box"
       v-loading="loading"
       element-loading-text="加载中请稍等"
       element-loading-spinner="el-icon-loading"
       element-loading-background="rgba(22, 160, 205, 0.3)">
    <screen_menu @click="setChooseComponent(null)"></screen_menu>
    <div class="b_main" id="b_main">
      <figure_layer @click="setChooseComponent(null)"></figure_layer>
      <div class="panelBox" :key="boxKey" id="panelBox"  @click="setChooseComponent(null)" :style="'width:'+panelBoxStyle.width+'px;height:'+panelBoxStyle.height+'px'">
        <div class="panel"
             tabindex="0"
             ref="panel"
             id="panel"
             :style="setPanelStyle()">
          <div v-for="(item,index) in panelDom.component" @click.stop="setChooseComponent(item)">
            <div :is="item.componentName" :id="item.uuid" :ref="item.uuid" :config="item"></div>
          </div>
        </div>
      </div>
      <operate></operate>
    </div>
  </div>
</template>

<script>
  import * as u from '@/util/util'
  import components from '@/util/screen_components'

  export default {
    name: "index",
    components: Object.assign({
      'screen_menu': () => import('./module/screenMenu'),
      'figure_layer': () => import('./module/figureLayer'),
      'operate': () => import('./module/operate'),
    }, components),
    computed: {
      //当前选中的值
      chooseComponent() {
        return this.$store.state.chooseComponent
      },
      //主面板加载完成
      initOk() {
        return this.$store.state.initOk
      },
    },
    data() {
      return {
        //面板key
        boxKey:0,
        //页面加载
        loading: true,
        //面板样式
        panelBoxStyle: {},
        //面板内容
        panelDom: {
          //背景色
          backgroundColor: "rgba(40, 61, 99, 1)",
          //背景图
          backgroundImg: require("@/assets/img/bg1.png"),
          //大屏适应宽度
          width: 0,
          //大屏适应高度
          height: 0,
          //组件集合
          component: [],
        },
      }
    },
    created() {
      //初始化
      this.init();
    },
    mounted() {
      this.keyboardMonitor();
      //共享到vuex
      this.$store.commit("setPanelRefs", this.$refs.panel)
    },
    methods: {

      //选中一个组件
      setChooseComponent(item) {
        //共享到vuex
        this.$store.commit("setChooseComponent", item);
      },

      //全屏监听
      full() {
        var vm = this;
        document.addEventListener('webkitfullscreenchange', function (e) {
          if (!(e.currentTarget.webkitIsFullScreen)) {
            vm.$store.commit("setScreenMove", true)
          } else {
            //进入webkitIsFullScreen
          }
        })
        document.addEventListener('fullscreenchange', function (e) {
          if (!document.fullscreenElement) {
            vm.$store.commit("setScreenMove", true)
          } else {
            //进入fullscreenchange
          }
        })
        document.addEventListener('MSFullscreenChange', function (e) {
          if (!document.msFullscreenElement) {
            vm.$store.commit("setScreenMove", true)
          } else {
            //IE进
          }
        })
        document.addEventListener('mozfullscreenchange', function (e) {
          if (!document.mozFullScreenElement) {
            vm.$store.commit("setScreenMove", true)
          } else {
            //火狐进
          }
        })
      },

      //预览
      preview() {
        this.$store.commit("setScreenMove", false)
        this.$store.commit("setChooseComponent", null)
        let interval = setInterval(res => {
          let element = document.getElementById('panel')
          if (element != null) {
            window.clearInterval(interval)
            if (element.requestFullscreen) {
              element.requestFullscreen()
            }
            // FireFox
            else if (element.mozRequestFullScreen) {
              element.mozRequestFullScreen()
            }
            // Chrome等
            else if (element.webkitRequestFullScreen) {
              element.webkitRequestFullScreen()
            }
            // IE11
            else if (element.msRequestFullscreen) {
              element.msRequestFullscreen()
            }
          }
        }, 10)
      },

      setPanelStyle() {
        return {
          "transform": "scale(" + this.panelDom.w + "," + this.panelDom.h + ")",
          "height": this.panelDom.height + "px",
          "width": this.panelDom.width + "px",
          "background-color": this.panelDom.backgroundColor,
          "background-image": 'url(' + this.panelDom.backgroundImg + ')',
          "background-size": "100% 100%"
        }
      },

      //初始化
      init() {
        //可以操作
        this.$store.commit("setScreenMove", true);
        //全屏监听
        this.full();
        //键盘监听事件开启
        u.get("/bus-screen/get-by-id/" + this.$route.params.id).then(res => {
          u.get("/bus-screen/getScreenJson/" + this.$route.params.id).then(json => {
            if (json != null) {
              this.panelDom = JSON.parse(json);
            }
            this.panelDom.width = res.width;
            this.panelDom.height = res.height;
            this.panelDom.note = res.note;
            if(this.panelDom.theme==null){
              this.panelDom.theme=null;
            }
            console.log(this.panelDom)
            //共享到vuex
            this.$store.commit("setPanelDom", this.panelDom)
            this.loading = false;
            this.$store.commit("setInitOk", true)
            //设置面板宽度
            //计算父面板高宽
            this.calculate();
            //共享到vuex
            this.$store.commit("setPanelDom", this.panelDom)
          })
        })
      },
      //计算宽高比例
      calculate() {
        this.panelBoxStyle.width = document.documentElement.clientWidth - 150 - 300;
        this.panelBoxStyle.height = document.documentElement.clientHeight - 61;
        let w = (this.panelBoxStyle.width / this.panelDom.width);
        let h = (this.panelBoxStyle.height / this.panelDom.height);
        this.panelDom.w = w;
        this.panelDom.h = h;
      },

      //选中组件移动
      move(key,e){
        switch (key) {
          case 37:    //监听左键
            e.preventDefault()
            this.chooseComponent.location.left--;
            break
          case 38:    //监听上键
            e.preventDefault()
            this.chooseComponent.location.top--;
            break
          case 39:    //监听右键
            e.preventDefault()
            this.chooseComponent.location.left++;
            break
          case 40:    //监听下键
            e.preventDefault()
            this.chooseComponent.location.top++;
            break
        }

      },

      //键盘事件监听
      keyboardMonitor(){
        //键盘按下
        document.getElementById("panel").onkeydown = e=>{
          let key = window.event.keyCode;
          //组件移动事件
          this.move(key,e);

          switch (key) {
            case 122:   //F11预览
              e.preventDefault()
              this.preview()
              break
            case 46:      //del删除
              e.preventDefault()
              this.$store.commit("delChooseComponent");
              break
          }

        }
        //键盘松开事件
        document.getElementById("panel").onkeyup= ev => {
          //判断松开的键
          let temp = ev.keyCode
        }
      },

      //刷新面板
      refreshBox(){
        this.boxKey++;
      }
    },
  }
</script>

<style scoped lang="scss">
  .box {
    width: 100%;
    height: 100%;
    background: #1d1f26;
    display: flex;
    flex-direction: column;
    .b_main {
      width: 100%;
      flex: 1;
      display: flex;
      .panelBox {
        .panel {
          transform-origin: 0 0;
          overflow: hidden;
        }
      }
    }
  }

</style>
